<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>管理员登录</title>
        <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
        <link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
        <link rel="stylesheet" href="/css/style.css">
    </head>
    <body>
        <div class="section dwo">
            <div class="container">
                <div class="row full-height justify-content-center">
                    <div class="col-12 text-center align-self-center py-5">
                        <div class="section pb-5 pt-5 pt-sm-2 text-center">
                            <input class="checkbox" type="checkbox" id="reg-log" name="reg-log">
                            <div class="card-3d-wrap mx-auto">
                                <div class="card-3d-wrapper bgk">
                                    <div class="card-front">
                                        <div class="center-wrap">
                                            <div class="section text-center">
                                                <h4 class="mb-4 pb-3">登录</h4>
                                                <#--登录失败回显-->
                                                <#if loginError??>
                                                    <span style="color: red; font-size: 13px">${loginError}</span>
                                                </#if>

                                                <form action="/toLogin" method="post">
                                                    <div class="form-group">
                                                        <input type="text" name="username" class="form-style"
                                                               placeholder="请输入用户名" min="4" maxlength="11"
                                                               autocomplete="off" required value="admin">
                                                        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                                                    </div>
                                                    <div class="form-group mt-2">
                                                        <input type="password" name="password" class="form-style"
                                                               placeholder="请输入密码" maxlength="15" autocomplete="off"
                                                               required value="zy2021">
                                                        <i class="fa fa-unlock-alt" aria-hidden="true"></i>
                                                    </div>
                                                    <input type="submit" class="btn mt-4" value="登录">
                                                </form>
                                                <div class="d-flex justify-content-between mt-4 text-left">
                                                    <div class="flex-fill">
                                                        <p><label for="reg-log">没有帐号？立即注册</label></p>
                                                    </div>
                                                    <div class="flex-fill text-right">
                                                        <p><a href="javascript:" class="forgot link">忘记密码？</a></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-back">
                                        <div class="center-wrap">
                                            <div class="section text-center">
                                                <h4 class="mb-1 pb-3">注册</h4>
                                                <form method="post" action="register">
                                                    <div class="form-group">
                                                        <input type="text" name="username" class="form-style usernamerg"
                                                               placeholder="请输入用户名" maxlength="11" autocomplete="off">
                                                        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                                                    </div>
                                                    <div class="form-group mt-2">
                                                        <input type="email" name="email" class="form-style emailrg"
                                                               placeholder="请输入电子邮箱" maxlength="18" autocomplete="off">
                                                        <i class="fa fa-envelope" aria-hidden="true"></i>
                                                    </div>
                                                    <div class="form-group mt-2">
                                                        <input type="text" name="phone" class="form-style phonerg"
                                                               placeholder="请输入手机号" maxlength="11" autocomplete="off">

                                                        <i class="fa fa-phone" aria-hidden="true"></i>
                                                    </div>
                                                    <div class="form-group mt-2">
                                                        <input type="password" name="password" class="form-style"
                                                               placeholder="请输入密码" maxlength="11" autocomplete="off">
                                                        <i class="fa fa-unlock-alt" aria-hidden="true"></i>
                                                    </div>
                                                    <div class="errorMSG">
                                                        <span style="color: red; font-size: 13px"
                                                              class="error01"></span>
                                                        <span style="color: red; font-size: 13px"
                                                              class="error03"></span>
                                                        <span style="color: red; font-size: 13px"
                                                              class="error02"></span>
                                                    </div>
                                                    <input type="submit" class="btn mt-4" value="注册">
                                                </form>
                                                <p class="mb-0 mt-4 text-center"><label for="reg-log">已有帐号？立即登录</label>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            //用户名唯一
            $('.usernamerg').blur(function () {
                let username = $('.usernamerg').val();
                $.ajax({
                    url: URL() + "register1?",
                    type: "GET",
                    data: "username=" + username,
                    success: function (data) {
                        $('.error01').text(data);
                    }
                });
            });
            //号码唯一
            $('.phonerg').blur(function () {
                let phone = $('.phonerg').val();
                $.ajax({
                    url: URL() + "register2?",
                    type: "GET",
                    data: "phone=" + phone,
                    success: function (data) {
                        $('.error02').text(data);
                    }
                });
            });
            //邮箱唯一
            $('.emailrg').blur(function () {
                let email = $('.emailrg').val();
                $.ajax({
                    url: URL() + "register3?",
                    type: "GET",
                    data: "email=" + email,
                    success: function (data) {
                        $('.error03').text(data);
                    }
                });
            });

            //获取项目路径
            function URL() {
                return window.location.protocol + "//" + window.location.host + "/";
            }
        </script>
    </body>
</html>